<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/admin/college'}">学院管理</el-breadcrumb-item> 
      <el-breadcrumb-item>{{college.label}}</el-breadcrumb-item>
      <el-breadcrumb-item>学院领导管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="leaderList" stripe style="font-size: 15px;" >
        <!-- <el-table-column align="center" label="序号" width="80" type="index" ></el-table-column> -->
        <el-table-column align="center" label="工号" prop="id" width="100"></el-table-column>
        <el-table-column align="center" label="姓名"  prop="name" width="80"  ></el-table-column> 
        <el-table-column align="center" label="职位"  prop="position" width="120" ></el-table-column> 
        <el-table-column align="center" label="职称"  prop="job"  width="80" ></el-table-column> 
        <el-table-column align="center" label="电话" width="160" prop="phone"></el-table-column> 
        <el-table-column align="center" label="邮箱" width="220" prop="email"></el-table-column> 
        <el-table-column align="center" label="负责专业"  prop="dept"  ></el-table-column> 
        <el-table-column align="center" label="操作(编辑/删除)" width="250" > 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle  @click="editLeader(scope.row)" ></el-button> 
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteLeader(scope.row.id, scope.row.name)" style="margin-left:10%"></el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-row style="font-size: 15px;margin:0 100px" width="1000px">
        <el-link icon="el-icon-plus" type="primary" round style="margin-left: 45%; margin-top: 20px;font-size: 15px" 
          @click="addLeader">录入领导信息</el-link>
      </el-row>
    </el-card>

    <!--修改课题的对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <!--主体内容区域-->
      <el-form :model="leaderForm" :rules="leaderFormRules" ref="leaderFormRef" label-width="80px" style="margin-left:100px;font-size: 20px">
        <el-form-item prop="id" label="工号">
          <el-input v-model="leaderForm.id" :disabled="!isAdd" placeholder="请输入领导工号"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="leaderForm.name" placeholder="请输入领导姓名"></el-input>
        </el-form-item>
        <el-form-item prop="position" label="职位">
          <el-input v-model="leaderForm.position" placeholder="请输入领导职位"></el-input>
        </el-form-item>
        <el-form-item prop="job" label="职称">
          <el-input v-model="leaderForm.job" placeholder="请输入领导职称"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话">
          <el-input v-model="leaderForm.phone" placeholder="请输入领导电话"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="leaderForm.email" placeholder="请输入领导邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="deptId" label="负责专业">
          <el-select value-key="id" v-model="leaderForm.deptId" placeholder="请选择账户类型">
            <el-option v-for="dept in deptList" :key="dept.id" :value="dept.id" :label="dept.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <el-row style="margin-left:30%;margin-top:50px">
          <el-button round @click.native="dialogVisible = false ">取 消</el-button>
          <el-button round v-if="isAdd" type="primary" @click.native="submitLeaderForm('leaderFormRef', 'add')" style="margin-left:10%">完成录入</el-button>
          <el-button round v-else type="success" @click.native="submitLeaderForm('leaderFormRef', 'edit')" style="margin-left:10%">提交修改</el-button> 
        </el-row>
      <!--底部按钮区域--> 
    </el-dialog>
  </div>
</template>

<script>
  import {getCollegeById} from '../../axios/college'
  import {getDeptListByCollegeId} from '../../axios/dept' 
  import {getLeaderListByCollegeId, updateLeaderById, adminAddLeader, deleteLeaderById} from '../../axios/leader'
  export default {
    name: 'AdminCollegeLeader',
    data(){
      const phoneValidator = (rule, val, cb) => {
        if (!val) return cb(new Error('请输入手机号'))
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (!regMobile.test(val)) return cb(new Error('请输入合法手机号'))
        cb()
      }
      const emailValidator = (rule, val, cb) => {
        if (!val) return cb(new Error('请输入邮箱'))
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if (!regEmail.test(val)) return cb(new Error('请输入合法邮箱'))
        cb()
      }
      return {
        isAdd: false,
        dialogTitle: '',
        dialogVisible: false, 
        college: {},
        leaderList: [], // 该学员的领导列表
        deptList: [],
        leaderForm: {},
        leaderFormRules:{
          id: [ { required: true, message: '工号不能为空', trigger: 'blur' } ],
          name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ],
          position: [ { required: true, message: '职位不能为空', trigger: 'blur' } ],
          job: [ { required: true, message: '职称不能为空', trigger: 'blur' } ],
          phone: [ {required: true,validator: phoneValidator, trigger: 'blur'} ],
          email: [ {required: true, validator: emailValidator, trigger: 'blur'} ],
          deptId: [ {required: true, message: '负责专业不能为空', trigger: 'blur'} ]
        }
      }
    },
    created(){
      this.getCollegeInfo(this.$route.params.id)
      this.getLeaderList(this.$route.params.id)
      this.getDeptListOfCollege(this.$route.params.id)
    },
    methods:{
      // 获取学院信息
      getCollegeInfo(id){
        // 向后端发送请求
        getCollegeById(id).then(res => {
          if(res.success) {
            this.college = res.data    
          }
        }) 
        // 无后端，模拟数据
        // this.college = {id, label: '数学与计算机学院'}
        // this.label = this.college.label
      },
      // 获取该学院领导列表 
      getLeaderList(id){ 
        // 向后端发送请求
        getLeaderListByCollegeId(id).then(res => {
           if(res.success) this.leaderList = res.data  
        })

        // 无后端，模拟数据
        //  this.leaderList = [
        //    {id: '810001', name: '刘强冬', position: '副院长', job: '副教授', phone: '13789799897', email: '13789799897@126.com'},
        //    {id: '810002', name: '张小三', position: '院长', job: '教授', phone: '13789799987', email: '13789799987@126.com'},
        //    {id: '810003', name: '李大四', position: '院党委书记', job: '教授', phone: '13789799997', email: '13789799997@126.com'}
        //  ]
      },
      getDeptListOfCollege(id){
        getDeptListByCollegeId(id).then(res => {
          if(res.success) this.deptList = res.data 
        })
      }, 
      editLeader(leaderInfo){
        this.isAdd = false
        this.dialogTitle = '编辑领导信息'
        this.leaderForm = leaderInfo
        this.dialogVisible = true
      },
      addLeader(){
        this.dialogTitle = '录入领导信息'
        this.leaderForm = {}
        this.isAdd = true
        this.dialogVisible = true  
      },
      // 管理员删除指定 id 的领导信息
      deleteLeader(id, label){ 
        this.$confirm('此操作将永久删除“' + label + '(' + id + ') ”领导, 是否继续?', '提示', {
          roundButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消', 
          type: 'warning'
        }).then(() => {
          // 发送后端请求，删除指定 id 的通知
          deleteLeaderById(id).then(res => {
             if(res.success) {
              this.$message.success('删除成功!'); 
              this.getLeaderList(this.$route.params.id)
            }
          }) 
        }).catch(() => {
          this.$message.info('已取消删除!');          
        }); 
      },
      submitLeaderForm(leaderFormRef, todo){  
        this.$refs[leaderFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              if(todo === 'edit'){
                // 此时发送后端请求，保存修改信息
                updateLeaderById(this.leaderForm).then(res => {
                  if(res.success) {
                    this.$message.success('修改成功!') 
                    this.dialogVisible = false 
                    this.getLeaderList(this.$route.params.id)
                  } 
                }) 
              }else{  
                this.leaderForm.collegeId = this.college.id 
                // 此时发送后端请求，保存录入信息 
                adminAddLeader(this.leaderForm).then(res => {
                 if(res.success) {
                    this.$message.success('录入成功!')
                    this.dialogVisible = false 
                    this.getLeaderList(this.$route.params.id)
                  }  
                })   
              }  
            }).catch(() => {  
              this.$message.info('已取消提交!');   
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 57%;
  }
</style>